<template>
    <transition name='fade'>
        <div class="slide-content-wrapper" v-show='menuVisible &&
        settingVisible===3'>
        <transition name='slide-right'>
            <div class="content" v-if='settingVisible===3'>
                <div class="content-page-wrapper" v-if='bookAvailable'>
                    <div class="content-page">
                        <component :is="currentTab ===1?content:bookmark"></component>
                    </div>
                    <div class="content-page-tab">
                        <div class="content-page-tab-item"
                        :class="{'selected':currentTab===1}"
                        @click='selectTab(1)'>
                        {{$t('book.navigation')}}
                        </div>
                        <div class="content-page-tab-item"
                        :class="{'selected':currentTab===2}"
                        @click='selectTab(2)'>
                        {{$t('book.bookmark')}}
                        </div>
                    </div>
                </div>
                <div class="content-empty" v-else>
                    <ebook-loading></ebook-loading>
                </div>
            </div>
        </transition>
            <div class="content-bg" @click="hide()"></div>
        </div>
   </transition>
</template>

<script>
import { ebookMixin } from '../../utils/mixin'
import EbookLoading from './EbookLoading'
import EbookSlideContents from './EbookSlideContents'
export default {
  mixins: [ebookMixin],
  components: {
    EbookLoading
  },
  data () {
    return {
      currentTab: 1,
      content: EbookSlideContents,
      bookmark: null
    }
  },
  methods: {
    hide () {
      console.log('aaa')
      this.hideTitleAndMenu()
    },
    selectTab (tab) {
      this.currentTab = tab
    }
  }
}
</script>

<style lang='scss' scoped>
     @import "../../assets/styles/global";
    .slide-content-wrapper{
        position:absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        z-index: 300;
        .content{
            flex: 0 0 85%;
            width: 85%;
            height: 100%;
            .content-page-wrapper{
                width: 100%;
                display: flex;
                flex-direction: column;
                height: 100%;
                width: 100%;
                .content-page{
                    width: 100%;
                    flex:1;
                    overflow: hidden;
                }
                .content-page-tab{
                    display: flex;
                    flex:0 0 px2rem(48);
                    height:px2rem(48);
                    width: 100%;
                    .content-page-tab-item{
                        flex:1;
                        font-size: px2rem(12);
                        @include center;
                    }
                }
            }
            .content-empty{
                widows: 100%;
                height:100%;
                @include center;
            }
        }
        .content-bg{
            flex:0 0 15%;
            width: 15%;
            height: 100%;
        }

    }
</style>
